<div class="container"> 
    <div class="condition">
            <form #searchForm="ngForm" (submit)="searchClassEntity()">
                    <div class="row">
                        <div class="col">
                            <input type="text"
                            class="form-control my-1" 
                            #uclassName="ngModel" 
                            name="className" 
                            [(ngModel)]="search.class_name" 
                            placeholder="班级名称">
                        </div>
                        <div class="col">
                            <select 
                            class="custom-select my-1 mr-sm-2" 
                            #utermId="ngModel" 
                            name="term_id" 
                            [(ngModel)]="search.term_id"
                            >
                                <option value="">请选择学期...</option>
                            
                                <option *ngFor="let termItem of allTerms" [value]="termItem.id">
                                    {{ termItem.name }}
                                </option>
                            </select>
                        </div>
                        <div class="col">
                            <input type="number"
                            class="form-control my-1" 
                            #ustartTime="ngModel" 
                            name="start_time" 
                            [(ngModel)]="search.start_time" 
                            placeholder="开始时间">
                        </div>
                        <div class="col">
                            <input type="number"
                            class="form-control my-1" 
                            #uendTime="ngModel" 
                            name="end_time" 
                            [(ngModel)]="search.end_time" 
                            placeholder="结束时间">
                        </div>
                        <div class="col"> 
                            <button 
                            type="submit"
                            [disabled]="!searchForm.form.valid"
                            class="btn btn-primary my-1">搜索</button> 
                        </div>
                        <div class="col"> 
                             <button class="btn btn-info" (click)="openAddModal(addTemplate)">新增</button>
                        </div>
                    </div>
            </form>
    </div>
    <div class="list">
        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>班级名称</th>
                    <th>学期</th>
                    <!-- <th>课程</th> -->
                    <th>开班日期</th>
                    <th>闭班日期</th>
                    <th>开始时间</th>
                    <th>结束时间</th>
                    <th>人数限制</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody *ngIf="classEntities">
                <tr *ngFor="let item of classEntities">
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.term.name }}</td>
                    <!-- <td>{{ item.course.name}}</td> -->
                    <td>{{ item.start_day }}</td>
                    <td>{{ item.end_day }}</td>
                    <td>{{ item.start_time }}:00</td>
                    <td>{{ item.end_time }}:00</td>
                    <td>{{ item.member_limit }}</td>
                    <td>
                        <button (click)="openEditModal(editTemplate, item)" class="btn btn-primary btn-sm" type="button">编辑</button>
                        <button (click)="deleteClassEntity(item)" class="btn btn-primary btn-sm" type="button">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <pagination 
            *ngIf="page"
            [totalItems]="page.total" 
            [(ngModel)]="page.currentPage" 
            [itemsPerPage]="page.perPage"
            (pageChanged)="pageChanged($event)"
            [maxSize]="maxSize"
            [rotate]="rotate" 
            [boundaryLinks]='true'
            class="pagination-sm right"
        previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;"></pagination>

    </div>

    <ng-template #addTemplate>
        <div class="modal-header">
            <h4 class="modal-title pull-left">新增</h4>
            <button type="button" class="close pull-right" aria-label="Close" (click)="addModalRef.hide()">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
      
          <div class="modal-body">
            <form #addForm="ngForm" (submit)="addClassEntity()">
              <div class="form-group row">
                  <label for="name" class="col-sm-3 col-form-label">班级名称</label>
                  <div class="col-sm-9">
                      <input type="text"
                      *ngIf="classEntity"
                      required
                      class="form-control"
                      name="name"   
                      [(ngModel)]="classEntity.name"
                      placeholder="如：蛙泳早班课1班"
                      #uname="ngModel"
                      >
                  </div>
              </div>
              <!-- 学期 -->
              <div class="form-group row">
                  <label for="name" class="col-sm-3 col-form-label">学期</label>
                  <div class="col-sm-9">
                      <select
                      required
                      *ngIf="classEntity"
                      class="form-control"
                      name="term_id"
                      [(ngModel)]="classEntity.term_id"
                      #uterm_id="ngModel"
                      >
                          <option>请选择学期</option>
                          <option
                              *ngFor="let item of terms"
                              value="{{item.id}}"
                          >{{ item.name }}</option>
                      </select>
                  </div>
              </div>
              <!-- 课程 -->
              <!-- <div class="form-group row">
                  <label for="name" class="col-sm-3 col-form-label">课程</label>
                  <div class="col-sm-9">
                      <select
                      required
                      *ngIf="classEntity"
                      class="form-control"
                      name="course_id"
                      [(ngModel)]="classEntity.course_id"
                      #ucourse_id="ngModel"
                      >
                          <option>请选择课程</option>
                          <option
                              *ngFor="let item of courses"
                              value="{{ item.id }}"
                          >{{ item.name }}</option>
                      </select>
                  </div>
              </div> -->
      
              <!-- 开班日期区间 -->
              <div class="form-group row">
                  <label for="name" class="col-sm-3 col-form-label">开班日期区间</label>
                  <div class="col-sm-9">
                      <input
                          class="form-control"
                          #dpr="bsDaterangepicker"
                          *ngIf="classEntity"
                          bsDaterangepicker
                          name="daterange"
                          #urange="ngModel"
                          [(ngModel)]="daterange"
                          [bsConfig]="{ dateInputFormat: 'YYYY-MM-DD' }"
                      >
                  </div>
              </div>
      
              <!-- 开始时间 -->
              <div class="form-group row">
                  <label for="name" class="col-sm-3 col-form-label">每日开始时间</label>
                  <div class="col-sm-9">
                      <select
                      required
                      *ngIf="classEntity"
                      class="form-control"
                      name="start_time"
                      [(ngModel)]="classEntity.start_time"
                      #ustart_time="ngModel"
                      >
                          <option
                              *ngFor="let item of timeRange"
                              [value]="item"
                          >{{ item }}</option>
                      </select>
                  </div>
              </div>
      
              <!-- 结束时间 -->
              <div class="form-group row">
                  <label for="name" class="col-sm-3 col-form-label">每日结束时间</label>
                  <div class="col-sm-9">
                      <select
                      required
                      *ngIf="classEntity"
                      class="form-control"
                      name="start_time"
                      [(ngModel)]="classEntity.end_time"
                      #uend_time="ngModel"
                      >
                          <option
                              *ngFor="let item of timeRange"
                              value="{{ item}}"
                          >{{ item }}</option>
                      </select>
                  </div>
              </div>
      
              <!-- 人数限制 -->
              <div class="form-group row">
                  <label for="name" class="col-sm-3 col-form-label">人数限制</label>
                  <div class="col-sm-9">
                      <input type="number"
                      *ngIf="classEntity"
                      required
                      class="form-control"
                      name="member_limit"
                      [(ngModel)]="classEntity.member_limit"
                      placeholder="写数字"
                      #umember_limit="ngModel"
                      >
                  </div>
              </div>
      
              <div class="form-group row">
                  <div class="col-sm-2">
                      <button type="submit" [disabled]="!addForm.form.valid" class="btn btn-success" >保存</button>
                  </div>
              </div>
            </form>
          </div>
      
          <div class="modal-footer">
            <button type="button" class="btn btn-default" (click)="addModalRef.hide()">关闭</button>
          </div>
    </ng-template>

    <ng-template #editTemplate>
        <div class="modal-header">
            <h4 class="modal-title pull-left">编辑</h4>
            <button type="button" class="close pull-right" aria-label="Close" (click)="editModalRef.hide()">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
      
          <div class="modal-body">
            <form #addForm="ngForm" (submit)="editClassEntity()">
              <div class="form-group row">
                  <label for="name" class="col-sm-3 col-form-label">班级名称</label>
                  <div class="col-sm-9">
                      <input type="text"
                      *ngIf="classEntity"
                      required
                      class="form-control"
                      name="name"
                      [(ngModel)]="classEntity.name"
                      placeholder="如：蛙泳早班课1班"
                      #uname="ngModel"
                      >
                  </div>
              </div>
              <!-- 学期 -->
              <div class="form-group row">
                  <label for="name" class="col-sm-3 col-form-label">学期</label>
                  <div class="col-sm-9">
                      <select
                      required
                      *ngIf="classEntity"
                      class="form-control"
                      name="term_id"
                      [(ngModel)]="classEntity.term_id"
                      #uterm_id="ngModel"
                      >
                          <option>请选择学期</option>
                          <option
                              *ngFor="let item of terms"
                              value="{{item.id}}"
                          >{{ item.name }}</option>
                      </select>
                  </div>
              </div>
              <!-- 课程 -->
              <!-- <div class="form-group row">
                  <label for="name" class="col-sm-3 col-form-label">课程</label>
                  <div class="col-sm-9">
                      <select
                      required
                      *ngIf="classEntity"
                      class="form-control"
                      name="course_id"
                      [(ngModel)]="classEntity.course_id"
                      #ucourse_id="ngModel"
                      >
                          <option>请选择课程</option>
                          <option
                              *ngFor="let item of courses"
                              value="{{ item.id }}"
                          >{{ item.name }}</option>
                      </select>
                  </div>
              </div> -->
      
              <!-- 开班日期区间 -->
              <div class="form-group row">
                  <label for="name" class="col-sm-3 col-form-label">开班日期区间</label>
                  <div class="col-sm-9">
                      <input
                          class="form-control"
                          #dpr="bsDaterangepicker"
                          *ngIf="classEntity"
                          bsDaterangepicker
                          name="daterange"
                          #urange="ngModel"
                          [(ngModel)]="daterange"
                          [bsConfig]="{ dateInputFormat: 'YYYY-MM-DD' }"
                      >
                  </div>
              </div>
      
              <!-- 开始时间 -->
              <div class="form-group row">
                  <label for="name" class="col-sm-3 col-form-label">每日开始时间</label>
                  <div class="col-sm-9">
                      <select
                      required
                      *ngIf="classEntity"
                      class="form-control"
                      name="start_time"
                      [(ngModel)]="classEntity.start_time"
                      #ustartTime="ngModel"
                      >
                          <option
                              *ngFor="let item1 of timeRange1"
                              [value]="item1"
                          >{{ item1 }}</option>
                      </select>
                  </div>
              </div>
      
              <!-- 结束时间 -->
              <div class="form-group row">
                  <label for="name" class="col-sm-3 col-form-label">每日结束时间</label>
                  <div class="col-sm-9">
                      <select
                      required
                      *ngIf="classEntity"
                      class="form-control"
                      name="end_time"
                      [(ngModel)]="classEntity.end_time"
                      #uend_time="ngModel"
                      >
                          <option
                              *ngFor="let item of timeRange"
                              [value]=" item"
                          >{{ item }}</option>
                      </select>
                  </div>
              </div>
      
              <!-- 人数限制 -->
              <div class="form-group row">
                  <label for="name" class="col-sm-3 col-form-label">人数限制</label>
                  <div class="col-sm-9">
                      <input type="number"
                      *ngIf="classEntity"
                      required
                      class="form-control"
                      name="member_limit"
                      [(ngModel)]="classEntity.member_limit"
                      placeholder="写数字"
                      #umember_limit="ngModel"
                      >
                  </div>
              </div>
      
              <div class="form-group row">
                  <div class="col-sm-2">
                      <button type="submit" [disabled]="!addForm.form.valid" class="btn btn-success" >保存</button>
                  </div>
              </div>
            </form>
          </div>
      
          <div class="modal-footer">
            <button type="button" class="btn btn-default" (click)="editModalRef.hide()">关闭</button>
          </div>
    </ng-template>
</div>
